<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@include file="include.jsp" %>
<title>事件</title>
</head>
<body>
事件绑定
<p><input type="button" value="KISSY监听事件" id="demo1" /></p>

<p><input type="button" value="jQuery监听事件" id="demo-jquery" /></p>

<!-- 追加的事件 
<p><input type="button" value="button" onclick="aaa();"  /></p>
-->
<script type="text/javascript">
      /**
      	 KISSY的用法
      */
	 (function(S){
			S.use("event",function(S,event){
				 event.add('#demo1','click',function(ev,i){
				        alert('你触发了'+ev.type+'事件,目标对象id为'+ev.target.id);
				    });
			}) 
	  })(KISSY);
   
   


/**
 * 测试
 */
function aaa(){
	event.add('#demo-jquery','click',function(ev){
        alert('你触发了'+ev.type+'事件,目标对象id为'+ev.target.id);
    });
}

/**
 * jQuery的用法
 */
$().ready(function(){
	$("#demo-jquery").click(function(){
		alert("jQuery 事件1");
	});
	
	$("#demo-jquery").bind("click",function(){
		alert("jQuery 事件2");
	})
})
</script>



<div style="display: none;">
<ul id="demo6">
              <li>测试1</li>
            <li>测试2</li>
            <li>测试3</li>
            <li>测试4</li>
</ul>
<BR />
<span>
	currentTarget永远指向监听事件的目标对象，实例中指向id为demo6的对象，而target是指向触发事件的对象，实例中是id为demo6的ul下的li。原因在于javascript事件的冒泡机制
</span>
</div>
<script type="text/javascript">
	KISSY.use("event",function(S,event){
		 event.add('#demo6','click',function(ev){
	          alert(S.DOM.text(ev.currentTarget));
	          alert(S.DOM.text(ev.target));
	      })
	})
</script>

<hr />
事件解绑

<p><input type="button" value="猛击就解绑（KISSY监听事件）" id="undemo1" /></p>

<p><input type="button" value="猛击就解绑（jQuery监听事件)" id="undemo-jquery" /></p>


<input type="button" value="手动解绑" onclick="u();">
<script type="text/javascript">
/*
(function(S){
	var event = S.Event;
	event.add("#undemo1","click",function(e){
		event.remove("#demo1","click");
		alert("KISSY 已经解绑")
	});
})(KISSY);
*/

KISSY.use("event",function(S,event){
	event.add("#undemo1","click",function(e,i){
		event.remove("#demo1","click");
		alert("KISSY 已经解绑");
	});
})



$("#undemo-jquery").bind("click",function(){
	$("#demo-jquery").unbind("click");
	alert("jQuery 已经解绑")
});

</script>
</body>
</html>